<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .m {
            display: flex;
            justify-content: space-around;
            margin-top: 100px
        }

        div {
            width: 10%;
            height: 400px;
            background-color: saddlebrown;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            transition: all 2s;
        }

        span {
            transform: rotateY(-180deg);
        }
    </style>
</head>

<body>
    <i>保底抽卡：40次保底一张橙卡30次保底一张紫卡，10次保底一张蓝卡。</i>
    <button disabled id="choujiang">一键抽奖</button>
    余额：<button id="jine" disabled>0</button>
    <button id="chongzhi">充值</button>
    <main class="m">
        <div><span></span>
            <p>翻牌</p>
        </div>
        <div><span></span>
            <p>翻牌</p>
        </div>
        <div><span></span>
            <p>翻牌</p>
        </div>
        <div><span></span>
            <p>翻牌</p>
        </div>
        <div><span></span>
            <p>翻牌</p>
        </div>
        <div><span></span>
            <p>翻牌</p>
        </div>
        <div><span></span>
            <p>翻牌</p>
        </div>
    </main>
    <script>
        let arr = ['橙卡武将', '紫卡武将', '蓝卡武将', '绿卡武将', '绿卡武将', '白卡武将', '白卡武将']
        let newArr = []
        let pre = 0
        let dom = document.getElementsByTagName('div')
        let span = document.getElementsByTagName('span')
        let p = document.getElementsByTagName('p')
        let chongzhi = document.getElementById('chongzhi')
        let jine = document.getElementById('jine')
        let choujiang = document.getElementById('choujiang')
        let btn = document.getElementsByTagName('button')[0]
        let fl = false
        let ck = false
        console.log(dom)
        console.log(btn)
        console.log(chongzhi)
        setInterval(() => {
            if (ck) {
                choujiang.disabled = true
            } else {
                if (pre < 700) {
                    choujiang.disabled = true
                } else {
                    choujiang.disabled = false
                }
            }
        }, 0)
        chongzhi.onclick = function () {

            pre += 700
            jine.innerHTML = pre
        }
        btn.onclick = function () {

            ck = true
            if (fl) {
                reset()
            }
            fl = true
            setTimeout(() => {
                fn()
            }, 500)
        }
        let a = 0
        let b = 0
        let c = 0


        function reset() {

            for (let i = 0; i < dom.length; i++) {
                dom[i].style.transition = 'all 0s';
                dom[i].style.transform = 'rotateY(' + 360 + 'deg)';
                p[i].style.display = 'block'
                span[i].style.display = 'none'
                span[i].style.color = '#fff'
                console.log(1)
            }

        }

        function fn() {

            if (pre != 0) {
                pre -= 700
            }
            jine.innerHTML = pre
            a++
            b++
            c++

            for (let i = 0; i < dom.length; i++) {
                let random = parseInt(Math.random() * 1000)
                setTimeout(() => {
                    dom[i].style.transition = 'all 2s';

                    dom[i].style.transform = 'rotateY(' + 180 + 'deg)';



                }, 500)
                setTimeout(() => {
                    span[i].style.display = 'block'
                    if (a === 40) {
                        span[i].innerHTML = arr[0]
                        span[i].style.color = 'sandybrown'
                        a = 0
                    } else if (b == 30) {
                        span[i].innerHTML = arr[1]
                        span[i].style.color = 'purple'

                        b = 0
                    } else if (c == 10) {
                        span[i].innerHTML = arr[2]
                        span[i].style.color = 'blue'

                        c = 0
                    } else {

                        if (random > 0 && random <= 10) {

                            if (a < 50) {
                                span[i].innerHTML = arr[6]
                            } else {
                                span[i].innerHTML = arr[0]
                                span[i].style.color = 'sandybrown'


                            }

                        }
                        if (random > 10 && random <= 30) {

                            if (b < 10) {
                                span[i].innerHTML = arr[5]
                            } else {
                                span[i].innerHTML = arr[1]
                                span[i].style.color = 'purple'



                            }


                        }
                        if (random > 30 && random <= 100) {
                            if (c < 5) {
                                span[i].innerHTML = arr[5]
                            } else {
                                span[i].innerHTML = arr[2]
                                span[i].style.color = 'blue'

                            }


                        }
                        if (random > 100 && random <= 200) {
                            span[i].innerHTML = arr[3]
                            span[i].style.color = 'green'

                        }
                        if (random > 200 && random <= 350) {
                            span[i].innerHTML = arr[4]
                            span[i].style.color = 'green'

                        }
                        if (random > 350 && random <= 550) {
                            span[i].innerHTML = arr[5]

                        }
                        if (random > 550 && random <= 1000) {
                            span[i].innerHTML = arr[6]

                        }
                    }
                    p[i].style.display = 'none'
                    setTimeout(() => {
                        ck = false
                    }, 800)
                }, 1100);


                console.log(a, b, c)

            }
            if (a == 79) {
                alert('下次至少一张橙卡')
            }
            if (b == 49) {
                alert('下次至少一张紫卡')
            }
            if (c == 19) {
                alert('下次至少一张蓝卡')
            }

        }
    </script>
</body>

</html>